<template>
	<view>
		<uv-popup ref="popup" mode="bottom" safeAreaInsetBottom round='20' closeable>
			<view style="height:900rpx; padding: 20rpx;">
				<view>
					<uni-section title="请选择省份" type="line">
						<uni-data-select :localdata="provinces" v-model="selectedProvince"
							@change="onProvinceChange"></uni-data-select>
					</uni-section>
					<uni-section title="请选择城市" type="line">
						<uni-data-select :localdata="citys" v-model="selectedCity" @change="onCityChange"
							:disabled="!selectedProvince"></uni-data-select>
					</uni-section>
					<uni-section title="请选择区县" type="line">
						<uni-data-select :localdata="areas" v-model="selectedArea"
							:disabled="!selectedCity"></uni-data-select>
					</uni-section>
					<view style="margin-top: 200rpx; display: flex;justify-content: center;">
						<fui-button radius="96rpx" btnSize="small" @click="confirm" background="#fa6f40"
							:disabled="!isSelectionComplete">确定</fui-button>
					</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import {
		areaListApi
	} from '../../../api/store.js'

	export default {
		props: {
			modelValue: Object,
		},
		data() {
			return {
				provinces: [], // 省份列表
				citys: [], // 城市列表
				areas: [], // 区县列表

				selectedProvince: '', // 选中的省份ID
				selectedCity: '', // 选中的城市ID
				selectedArea: '', // 选中的区县ID

				// 区域查询参数
				areasInfo: {
					areaLevel: '',
					cityCd: '',
					cityNm: '',
					mainPass: '1',
					pageNum: 0,
					pageSize: 0,
					parentCityCd: ''
				}
			}
		},
		computed: {
			// 计算选中的地区信息
			selectedAddress() {
				return {
					province: this.getAreaName(this.provinces, this.selectedProvince),
					city: this.getAreaName(this.citys, this.selectedCity),
					area: this.getAreaName(this.areas, this.selectedArea)
				}
			},

			// 检查是否完成完整选择
			isSelectionComplete() {
				return this.selectedProvince && this.selectedCity && this.selectedArea
			}
		},
		created() {
			this.getProvincesList()
		},
		methods: {
			// 获取省份列表
			async getProvincesList() {
				this.areasInfo.areaLevel = 1
				const res = await areaListApi(this.areasInfo)
				this.provinces = this.formatAreaData(res.data)
			},
			// 获取城市列表
			async getCitysList(parentCityCd) {
				this.areasInfo.areaLevel = 2
				this.areasInfo.parentCityCd = parentCityCd
				const res = await areaListApi(this.areasInfo)
				this.citys = this.formatAreaData(res.data)
			},
			// 获取区县列表
			async getAreasList(parentCityCd) {
				this.areasInfo.areaLevel = 3
				this.areasInfo.parentCityCd = parentCityCd
				const res = await areaListApi(this.areasInfo)
				this.areas = this.formatAreaData(res.data)
			},
			// 格式化地区数据
			formatAreaData(data) {
				return data.map(item => ({
					...item,
					value: item.cityCd,
					text: item.cityNm
				}))
			},
			// 根据ID获取地区名称
			getAreaName(list, id) {
				const area = list.find(item => item.value === id)
				return area ? area.text : ''
			},
			// 省份选择变化
			onProvinceChange(value) {
				this.selectedCity = '' // 清空城市选择
				this.selectedArea = '' // 清空区县选择
				this.citys = [] // 清空城市列表
				this.areas = [] // 清空区县列表

				if (value) {
					this.getCitysList(value)
				}
			},
			// 城市选择变化
			onCityChange(value) {
				this.selectedArea = '' // 清空区县选择
				this.areas = [] // 清空区县列表

				if (value) {
					this.getAreasList(value)
				}
			},
			// 打开弹窗
			open() {
				this.$refs.popup.open()
			},
			// 确认选择
			confirm() {
				if (!this.isSelectionComplete) return
				this.$emit('update:modelValue', this.selectedAddress)
				this.$refs.popup.close()
			}
		}
	}
</script>